<template>
  <div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane name="1">
        <span slot="label"><i class="el-icon-s-ticket"></i> 乐园门票</span>
        <div class="ticket-title">
          <p
            :style="
              switchTicketValue
                ? 'color: #EA7CA5; font-weight: bold'
                : 'color: #999; font-weight: bold'
            "
          >
            待出行的订单
          </p>
          <el-switch
            v-model="switchTicketValue"
            active-color="#409EFF"
            inactive-color="#EA7CA5"
            :active-value="false"
            :inactive-value="true"
            @change="handleTicketSwitch"
          >
          </el-switch>
          <p
            :style="
              !switchTicketValue
                ? 'color: #409EFF; font-weight: bold'
                : 'color: #999; font-weight: bold'
            "
          >
            已完成的订单
          </p>
        </div>
        <div v-if="switchTicketValue" class="ticket-inner">
          <div v-if="ticketNow.length > 0">
            <div v-for="(item, index) in ticketNow" :key="index">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>下单时间：{{ item.createTime | timeFilter }}</span>
                </div>
                <div class="elcard-content">
                  <h3>{{ item.ticketName }}</h3>
                  <h4>出行日期：{{ item.ticketDate | dateFilter }}</h4>
                  <p v-if="item.normalTicketNum">
                    标准票：{{ item.normalTicketNum }} 张
                    <span>{{ item.normalTicketPrice }} 元/张</span>
                  </p>
                  <p v-if="item.specialTicketNum">
                    儿童票 / 老年票：{{ item.specialTicketNum }} 张
                    <span>{{ item.specialTicketPrice }} 元/张</span>
                  </p>
                  <p>总价：{{ item.totalPrice }} 元</p>
                  <el-tag type="success">温馨提示：别忘记出游哦！</el-tag>
                </div>
              </el-card>
            </div>
          </div>
          <div v-else class="no-data" style="margin-top: 30px">
            还未购买过门票
          </div>
        </div>
        <div v-else class="ticket-inner">
          <div v-if="ticketOverdue.length > 0">
            <div v-for="(item, index) in ticketOverdue" :key="index">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>下单时间：{{ item.createTime | timeFilter }}</span>
                  <el-button
                    @click="delTicketOrder(item)"
                    style="float: right; padding: 3px 0"
                    type="text"
                    >删除</el-button
                  >
                </div>
                <div class="elcard-content">
                  <h3>{{ item.ticketName }}</h3>
                  <h4>出行日期：{{ item.ticketDate | dateFilter }}</h4>
                  <p v-if="item.normalTicketNum">
                    标准票：{{ item.normalTicketNum }} 张
                    <span>{{ item.normalTicketPrice }} 元/张</span>
                  </p>
                  <p v-if="item.specialTicketNum">
                    儿童票 / 老年票：{{ item.specialTicketNum }} 张
                    <span>{{ item.specialTicketPrice }} 元/张</span>
                  </p>
                  <p>总价：{{ item.totalPrice }} 元</p>
                  <el-tag type="info">定单已完成！</el-tag>
                </div>
              </el-card>
            </div>
          </div>
          <div v-else class="no-data" style="margin-top: 30px">
            暂无已完成出行的门票
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane name="2">
        <span slot="label"><i class="el-icon-bank-card"></i> 乐园年卡</span>
        <div class="ticket-title">
          <p
            :style="
              switchCardValue
                ? 'color: #EA7CA5; font-weight: bold'
                : 'color: #999; font-weight: bold'
            "
          >
            在生效的年卡
          </p>
          <el-switch
            v-model="switchCardValue"
            active-color="#409EFF"
            inactive-color="#EA7CA5"
            :active-value="false"
            :inactive-value="true"
            @change="handleCardSwitch"
          >
          </el-switch>
          <p
            :style="
              !switchCardValue
                ? 'color: #409EFF; font-weight: bold'
                : 'color: #999; font-weight: bold'
            "
          >
            已到期的年卡
          </p>
        </div>
        <div v-if="switchCardValue">
          <div class="card" v-if="cardNow.length > 0">
            <div v-for="(item, index) in cardNow" :key="index">
              <el-card :body-style="{ padding: '0px' }">
                <div class="elcard-inner">
                  <img
                    v-if="item.cardKind == 1"
                    :src="require('@/assets/crystal-pass.jpg')"
                    alt=""
                    width="300"
                    height="169"
                  />
                  <img
                    v-if="item.cardKind == 2"
                    :src="require('@/assets/gold-annual-pass.jpg')"
                    alt=""
                    width="300"
                    height="169"
                  />
                  <img
                    v-if="item.cardKind == 3"
                    :src="require('@/assets/diamond-annual-pass.jpg')"
                    alt=""
                    width="300"
                    height="169"
                  />
                  <div style="padding: 14px">
                    <h3 :class="'color_' + item.cardKind">
                      {{ item.cardName }}
                    </h3>
                    <div class="card-price">
                      <h4 :class="'color_' + item.cardKind">
                        {{ item.cardType | cardTypeFilter }}
                      </h4>
                      <span :class="'color_' + item.cardKind"
                        >{{ item.cardPrice }} 元</span
                      >
                    </div>
                    <p class="start-date">
                      卡片生效日期：{{ item.cardStartDate | dateFilter }}
                    </p>
                    <p class="end-date">
                      卡片到期时间：{{ item.cardEndDate | dateFilter }}
                    </p>
                    <p class="bug-date">
                      购卡时间：{{ item.createTime | timeFilter }}
                    </p>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
          <div v-else class="no-data">还未购买过年卡</div>
        </div>
        <div v-else>
          <div class="card" v-if="cardOverdue.length > 0">
            <div v-for="(item, index) in cardOverdue" :key="index">
              <el-card
                :body-style="{ padding: '0px' }"
                style="filter: grayscale(1)"
              >
                <div class="elcard-inner">
                  <img
                    v-if="item.cardKind == 1"
                    :src="require('@/assets/crystal-pass.jpg')"
                    alt=""
                    width="300"
                    height="169"
                  />
                  <img
                    v-if="item.cardKind == 2"
                    :src="require('@/assets/gold-annual-pass.jpg')"
                    alt=""
                    width="300"
                    height="169"
                  />
                  <img
                    v-if="item.cardKind == 3"
                    :src="require('@/assets/diamond-annual-pass.jpg')"
                    alt=""
                    width="300"
                    height="169"
                  />
                  <div style="padding: 14px">
                    <h3 :class="'color_' + item.cardKind">
                      {{ item.cardName }}
                    </h3>
                    <div class="card-price">
                      <h4 :class="'color_' + item.cardKind">
                        {{ item.cardType | cardTypeFilter }}
                      </h4>
                      <span :class="'color_' + item.cardKind"
                        >{{ item.cardPrice }} 元</span
                      >
                    </div>
                    <p class="start-date">
                      卡片生效日期：{{ item.cardStartDate | dateFilter }}
                    </p>
                    <p class="end-date">
                      卡片到期时间：{{ item.cardEndDate | dateFilter }}
                    </p>
                    <p class="bug-date" style="margin-bottom: 10px">
                      购卡时间：{{ item.createTime | timeFilter }}
                    </p>
                    <el-tag type="info">年卡已到期</el-tag>
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      size="small"
                      style="margin-left: 150px"
                      @click="delCardOrder(item)"
                    ></el-button>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
          <div v-else class="no-data">暂无已到期的年卡</div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import moment from "moment";
import axios from "axios";
import { mapState, mapMutations } from "vuex";

export default {
  components: {},
  filters: {
    dateFilter(date) {
      return moment(date).format("YYYY年MM月DD日");
    },
    timeFilter(time) {
      return moment(time).format("YYYY-MM-DD HH:mm:ss");
    },
    cardTypeFilter(cardType) {
      if (cardType == "1") {
        return "标准卡";
      }
      return "儿童卡 / 老年卡";
    },
  },
  data() {
    return {
      activeName: "1",
      allTicketInfo: [],
      allCardInfo: [],
      switchTicketValue: true,
      switchCardValue: true,
      ticketNow: [], // 未过期的门票
      cardNow: [], // 未过期的年卡
      ticketOverdue: [], // 过期的门票
      cardOverdue: [], // 过期的年卡
    };
  },
  watch: {
    loginDialogFormVisible() {
      if (this.registerDialogFormVisible) {
        return;
      }
      if (!this.loginDialogFormVisible) {
        if (
          !window.sessionStorage.getItem("username") &&
          location.href.split("/")[location.href.split("/").length - 1] ==
            "myOrder"
        ) {
          this.$router.push("/");
        }
      }
    },
    registerDialogFormVisible() {
      if (!this.registerDialogFormVisible) {
        if (
          !window.sessionStorage.getItem("username") &&
          location.href.split("/")[location.href.split("/").length - 1] ==
            "myOrder"
        ) {
          this.$router.push("/");
        }
      }
    },
  },
  computed: {
    ...mapState(["loginDialogFormVisible", "registerDialogFormVisible"]),
  },
  created() {
    if (!window.sessionStorage.getItem("username")) {
      this.$message.error("请先登陆账号");
      this.showLoginDialog();
    }
  },
  mounted() {
    this.getTicketInfo();
  },
  methods: {
    ...mapMutations(["showLoginDialog"]),
    // 点击页签触发
    async handleClick() {
      if (this.activeName == "1") {
        this.getTicketInfo();
      } else if (this.activeName == "2") {
        this.getCardInfo();
      }
    },
    // 获取用户门票信息
    async getTicketInfo() {
      var { data: res } = await axios.post(`${this.$server}/showTicketOrders`, {
        phone: window.sessionStorage.getItem("telephone"),
      });
      console.log(res, "查询用户门票信息");
      this.allTicketInfo = res.data.reverse();
      this.ticketOverdue = res.data
        .reverse()
        .filter((item) => new Date(item.ticketDate).getTime() < Date.now());
      this.ticketNow = res.data
        .reverse()
        .filter((item) => new Date(item.ticketDate).getTime() >= Date.now());
    },
    // 获取年卡信息
    async getCardInfo() {
      var { data: res } = await axios.post(`${this.$server}/showCardOrders`, {
        phone: window.sessionStorage.getItem("telephone"),
      });
      console.log(res, "查询用户年卡信息");
      this.allCardInfo = res.data.reverse();
      this.cardOverdue = res.data
        .reverse()
        .filter((item) => new Date(item.cardEndDate).getTime() < Date.now());
      this.cardNow = res.data
        .reverse()
        .filter((item) => new Date(item.cardEndDate).getTime() >= Date.now());
    },
    handleTicketSwitch() {
      console.log(this.switchTicketValue);
    },
    handleCardSwitch() {
      console.log(this.switchCardValue);
    },
    // 删除过期门票订单
    delTicketOrder(item) {
      this.$confirm("您确定要删除该订单信息吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          var { data: res } = await axios.post(
            `${this.$server}/deleteTicketOrders`,
            {
              _id: item._id,
            }
          );
          console.log(res, "删除门票订单响应");
          this.$message.success("删除成功!");
          this.getTicketInfo();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除过期年卡
    delCardOrder(item) {
      this.$confirm("您确定要删除该过期年卡吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          var { data: res } = await axios.post(
            `${this.$server}/deleteCardOrders`,
            {
              _id: item._id,
            }
          );
          console.log(res, "删除年卡响应");
          this.$message.success("删除成功!");
          this.getCardInfo();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-card {
  width: 300px;
  height: 380px;
  margin: 20px 0 15px 50px;
}

.ticket-title {
  display: flex;
  align-items: center;

  p {
    color: #606266;
    margin: 0 20px;
  }
}

.ticket-inner > div {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;

  ::v-deep .el-card {
    width: 350px;
    height: 320px;
    margin: 20px 0 15px 50px;
  }

  .elcard-content {
    h3 {
      color: #253b7c;
    }

    h4 {
      margin-top: 20px;
      color: #1d79af;
    }

    p {
      margin-top: 20px;
      color: #156694;

      span {
        margin-left: 20px;
      }
    }

    p:last-of-type {
      margin-top: 5px;
      margin-bottom: 15px;
    }
  }
}

.card {
  display: flex;
  flex-wrap: wrap;
}

.elcard-inner {
  color: #253b56;

  .card-price {
    margin-top: 10px;
    display: flex;

    span {
      margin-left: 20px;
    }
  }

  p {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    font-size: 14px;
  }

  .start-date {
    margin-top: 10px;
    color: #174670;
  }

  .end-date {
    margin-top: 5px;
    color: #174670;
  }

  .bug-date {
    margin-top: 10px;
    color: #999;
  }
}

.color_1 {
  color: #c985b4;
}
.color_2 {
  color: #deaf50;
}
.color_3 {
  color: #4f94cf;
}

.no-data {
  margin: 30px 0 30px 30px;
  color: #2c4662;
}
</style>
